.f { display: flex; }
.jcsb { justify-content: space-between; }
.jcc { justify-content: center; }
.aic { align-items: center; }
.ais { align-items: flex-start; }
.aie { align-items: flex-end; }
.f1 { flex: 1; }
.fw { flex-wrap: wrap; }
.relative { position: relative; }
.column { flex-direction: column; }
.shrink0 { flex-shrink: 0; }
.pointer { cursor: pointer; }
.hidden { overflow: hidden; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.mt3 {margin-top: 3px !important;}
.mt5 {margin-top: 5px !important;}
.mt6 {margin-top: 6px !important;}
.mt7 {margin-top: 7px !important;}
.mt8 {margin-top: 8px !important;}
.mt9 {margin-top: 9px !important;}
.mt10 {margin-top: 10px !important;}
.mt11 {margin-top: 11px !important;}
.mt12 {margin-top: 12px !important;}
.mt13 {margin-top: 13px !important;}
.mt14 {margin-top: 14px !important;}
.mt15 {margin-top: 15px !important;}
.mt17 {margin-top: 17px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}

.mb3 {margin-bottom: 3px !important;}
.mb5 {margin-bottom: 5px !important;}
.mb6 {margin-bottom: 6px !important;}
.mb7 {margin-bottom: 7px !important;}
.mb8 {margin-bottom: 8px !important;}
.mb9 {margin-bottom: 9px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb11 {margin-bottom: 11px !important;}
.mb12 {margin-bottom: 12px !important;}
.mb13 {margin-bottom: 13px !important;}
.mb14 {margin-bottom: 14px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb45 {margin-bottom: 45px !important;}

.ml5 {margin-left: 5px !important;}
.ml6 {margin-left: 6px !important;}
.ml7 {margin-left: 7px !important;}
.ml8 {margin-left: 8px !important;}
.ml9 {margin-left: 9px !important;}
.ml10 {margin-left: 10px !important;}
.ml11 {margin-left: 11px !important;}
.ml12 {margin-left: 12px !important;}
.ml13 {margin-left: 13px !important;}
.ml14 {margin-left: 14px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml25 {margin-left: 25px !important;}
.ml30 {margin-left: 30px !important;}

.mr5 {margin-right: 5px !important;}
.mr6 {margin-right: 6px !important;}
.mr7 {margin-right: 7px !important;}
.mr8 {margin-right: 8px !important;}
.mr9 {margin-right: 9px !important;}
.mr10 {margin-right: 10px !important;}
.mr11 {margin-right: 11px !important;}
.mr12 {margin-right: 12px !important;}
.mr13 {margin-right: 13px !important;}
.mr14 {margin-right: 14px !important;}
.mr15 {margin-right: 15px !important;}
.mr17 {margin-right: 17px !important;}
.mr20 {margin-right: 20px !important;}
.mr25 {margin-right: 25px !important;}
.mr30 {margin-right: 30px !important;}
.mr40 {margin-right: 40px !important;}
.mr50 {margin-right: 50px !important;}

.pt5 {padding-top: 5px !important;}
.pt6 {padding-top: 6px !important;}
.pt7 {padding-top: 7px !important;}
.pt8 {padding-top: 8px !important;}
.pt9 {padding-top: 9px !important;}
.pt10 {padding-top: 10px !important;}
.pt11 {padding-top: 11px !important;}
.pt12 {padding-top: 12px !important;}
.pt13 {padding-top: 13px !important;}
.pt14 {padding-top: 14px !important;}
.pt15 {padding-top: 15px !important;}
.pt20 {padding-top: 20px !important;}
.pt25 {padding-top: 25px !important;}
.pt30 {padding-top: 30px !important;}
.pt40 {padding-top: 40px !important;}
.pt50 {padding-top: 50px !important;}

.pb5 {padding-bottom: 5px !important;}
.pb6 {padding-bottom: 6px !important;}
.pb7 {padding-bottom: 7px !important;}
.pb8 {padding-bottom: 8px !important;}
.pb9 {padding-bottom: 9px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb11 {padding-bottom: 11px !important;}
.pb12 {padding-bottom: 12px !important;}
.pb13 {padding-bottom: 13px !important;}
.pb14 {padding-bottom: 14px !important;}
.pb15 {padding-bottom: 15px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb25 {padding-bottom: 25px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb50 {padding-bottom: 50px !important;}

.pl5 {padding-left: 5px !important;}
.pl6 {padding-left: 6px !important;}
.pl7 {padding-left: 7px !important;}
.pl8 {padding-left: 8px !important;}
.pl9 {padding-left: 9px !important;}
.pl10 {padding-left: 10px !important;}
.pl11 {padding-left: 11px !important;}
.pl12 {padding-left: 12px !important;}
.pl13 {padding-left: 13px !important;}
.pl14 {padding-left: 14px !important;}
.pl15 {padding-left: 15px !important;}
.pl20 {padding-left: 20px !important;}
.pl25 {padding-left: 25px !important;}
.pl30 {padding-left: 30px !important;}
.pl40 {padding-left: 40px !important;}
.pl50 {padding-left: 50px !important;}

.pr5 {padding-right: 5px !important;}
.pr6 {padding-right: 6px !important;}
.pr7 {padding-right: 7px !important;}
.pr8 {padding-right: 8px !important;}
.pr9 {padding-right: 9px !important;}
.pr10 {padding-right: 10px !important;}
.pr11 {padding-right: 11px !important;}
.pr12 {padding-right: 12px !important;}
.pr13 {padding-right: 13px !important;}
.pr14 {padding-right: 14px !important;}
.pr15 {padding-right: 15px !important;}
.pr20 {padding-right: 20px !important;}
.pr25 {padding-right: 25px !important;}
.pr30 {padding-right: 30px !important;}
.pr40 {padding-right: 40px !important;}
.pr50 {padding-right: 50px !important;}

.f12 { font-size: 12px; }
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; }
.f20 { font-size: 20px; }
.f22 { font-size: 22px; }
.f24 { font-size: 24px; }
.f26 { font-size: 26px; }
.f28 { font-size: 28px; }
 
.app-container {
  padding: 20px;
  background-color: var(--el-bg-color-page);
}

.bold { font-weight: 600; }

.tem {
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 显示省略号来表示溢出的文本 */
}

.tem2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 限制文本为3行 */
    overflow: hidden;
}

.tem3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 限制文本为3行 */
    overflow: hidden;
}

.link:hover {
    color: #f01414;
}

.fff { color: #fff; }
.black { color: #000 !important; }

.opacity7 { opacity: .7; }
.bb1 { border-bottom: 1px solid rgb(238, 238, 238);}
.radius10 { border-radius: 10px;overflow: hidden; }

/* 整个页面的滚动条 */
::-webkit-scrollbar {
    width: 8px; /* 滚动条的宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: #ddd; /* 轨道的背景颜色 */
    border-radius: 3px; /* 轨道的圆角 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: #777; /* 滑块的背景颜色 */
    border-radius: 3px; /* 滑块的圆角 */
}

/* 滚动条滑块悬停效果 */
::-webkit-scrollbar-thumb:hover {
    background: #555; /* 滑块悬停时的背景颜色 */
}

.scrollbar {
    -ms-overflow-style: -ms-autohiding-scrollbar; /* 自动隐藏滚动条 */
    scrollbar-base-color: #888; /* 滚动条基础颜色 */
    scrollbar-face-color: #888; /* 滚动条滑块颜色 */
    scrollbar-track-color: #f1f1f1; /* 滚动条轨道颜色 */
}
.no-select {
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* 标准语法 */
}